<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./dist/vue.js"></script>
</head>
<body>
    <!-- 
    
    vue实例有一个完整的生命周期，也就是从vue实例 开始创建、初始化数据、编译模板、挂载DOM、渲染、更新、销毁等一系列过程，称为vue的生命周期。通俗说就是vue实例从创建到销毁的过程。


    vue的生命周期：
            beforeCreate : (此时获取不到prop和data中的数据)
        *** created ： 数据请求 (可以获取到prop和data中的数据)
            beforeMount :  (获取到了虚拟DOM)
        ****mounted : 数据请求 / DOM操作 / 实例化(new Vue) / 计时器、延时器 (虚拟DOM解析成了真实DOM)
            beforeUpdate : 
        **  updated ：DOM操作 / 实例化(new Vue)
        **  beforeDestroy ： 取消计时器、延时器 
            destroyed :

            activated ：  被 keep-alive 缓存的组件激活(正在使用)时调用 (该钩子在服务器端渲染期间不被调用)
            deactivated ：被 keep-alive 缓存的组件停用时调用 (该钩子在服务器端渲染期间不被调用)
            errorCaptured :当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。

            keep-alive: 切换组件之后，组件放进activated，之前的组件放进deactivated

    vue官方定义： 
        https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90
    生命周期触发的顺序：
        刚一刷新页面，啥也没干的时候，就执行了 beforeCreate   created   beforeMount    mounted
        只要开始输入就执行 beforeUpdate updated ,每输入一个就执行一遍
        当输入 12345 的时候会调用 beforeDestroy destroyed
        之后再去输入都不会再执行任何函数方法

    具体顺序：
      1) new Vue()创建出vue实例之后，会初始化事件和生命周期，紧接着执行beforeCreate，此时数据还没有挂载，只是个空壳，无法访问到数据和真实DOM，一般不做操作。
      2) 开始挂载数据、绑定事件，然后执行created函数，这个时候已经可以使用数据，也可以更改数据，在created中更改数据不会触发updated函数，created是在渲染前倒数第二次更改数据的机会，不会触发其他钩子函数，一般可以在created中做初始数据的获取。
      3) 接下来开始找实例或者组件对应的模板，编译模板为虚拟DOM放入render函数中准备渲染，然后执行beforeMount函数，在beforeMount中虚拟DOM已经创建完成，马上就要渲染，在beforeMount中也可以更改数据，不会触发updated, 是最后一次在渲染前更改数据的机会，不会触发其他钩子函数，一般可以在beforeMount中做初始数据的获取。
      4) 接下来可以render，渲染出真实DOM，然后执行 mounted钩子函数，此时，组件已经出现在页面中，数据、真实DOM都已经处理好了，事件都已经挂载好了，可以在mounted中操作真实DOM。
      5) 当组件或实例的数据更改之后，会立即执行beforeUpdate，然后vue的虚拟DOM机构会重新构建虚拟DOM，与上一次的虚拟DOM树利用diff算法进行对比之后重新渲染，一般在beforeUpdate中不做什么事。
      6) 当更新完成后，执行updated, 数据已经更新弯成，DOM也重新渲染完成，可以操作更新后的虚拟DOM
      7) 当经过某种途径调用 $destroy 方法后，立即执行 beforeDestroy ,一般在 beforeDestroy 中做一些售后工作，例如:清除定时器、清除非指令绑定的事件等等。
      8) 组件的数据绑定、监听等去掉之后只剩下DOM空壳，这个时候执行 destroyed, 在 destroyed 中也可以做售后工作。
    
     -->
    <div id="app">
        <input type="text" v-model="username" @keyup="getData">
    </div>
</body>
<script>
    const vm = new Vue({
        el:'#app',
        data:{
            username:''
        },
        methods:{
            getData(){
                if(this.username=='123456'){
                    this.$destroy() // 销毁
                }
            }
        },
        // 一定要注意：钩子函数是写在methods之外的，千万别写到methods里
        beforeCreate(){
            console.log('beforeCreate')
        },
        created(){
            console.log('created')
        },
        beforeMount(){
            console.log('beforeMount')
        },
        mounted(){
            console.log('mounted')
        },
        beforeUpdate(){
            console.log('beforeUpdate')
        },
        updated(){
            console.log('updated')
        },
        beforeDestroy(){
            console.log('beforeDestroy')
        },
        destroyed(){
            console.log('destroyed')
        },

    })
</script>
</html>